<template>
  <div class="layout">
    <div class="layout-header">
        <bg-header></bg-header>
    </div>
    <div class="layout-body">
        
      <div class="layout-left">
        <slot name="leftContent">1</slot>
      </div>
      <div class="layout-center">
        <div class="layout-ctx">
            <slot name="fullScreenMap">1</slot>
        </div>
      </div>
      <div class="layout-right">
        <slot name="rightContent">1</slot>

      </div>
     
    </div>
  </div>
</template>
<script>
import bgHeader from '../../layout/components/BigScreenHeader/index.vue'
console.log(bgHeader)
    export default {
        components:{
            bgHeader
        }
    }
</script>
<style lang="scss">
.layout {
   background: linear-gradient(180deg, rgba(17, 77, 71, 0.3) 0%, rgba(22, 53, 50, 0.3) 100%);
  .layout-header {
    /* 自动布局子元素 */
    position: static;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 62px;
    opacity: 1;

    z-index: 0;
  }
  .layout-body {
    display: flex;
    margin-top: 24px;
    padding: 0px 16px 28px 16px;
    gap: 32px;
    
    .layout-left {
      position: static;
      left: 16px;
      top: 0px;
      width: 480px;
      height: 966px;
      border-radius: 5px;
      opacity: 1;

      /* 自动布局 */
      display: flex;
      flex-direction: column;
      padding: 16px 0px;
      gap: 24px;

      /* 背景渐变1 */
      background: linear-gradient(
        180deg,
        rgba(17, 77, 71, 0.3) 0%,
        rgba(22, 53, 50, 0.3) 100%
      );

      z-index: 0;
    }
    .layout-center {
      /* 自动布局子元素 */
      position: static;
      left: 528px;
      top: 0px;
      width: 864px;
      height: 966px;
      border-radius: 5px;
      opacity: 1;

      /* 自动布局 */
      display: flex;
      flex-direction: column;
      padding: 16px 0px;
      gap: 30px;
      flex-grow: 1;

      /* 背景渐变1 */
      background: linear-gradient(
        180deg,
        rgba(17, 77, 71, 0.3) 0%,
        rgba(22, 53, 50, 0.3) 100%
      );

      z-index: 1;
    }
    .layout-right {
      position: static;
      left: 1424px;
      top: 0px;
      width: 480px;
      height: 966px;
      border-radius: 5px;
      opacity: 1;

      /* 自动布局 */
      display: flex;
      flex-direction: column;
      padding: 24px 0px;
      gap: 30px;

      /* 背景渐变1 */
      background: linear-gradient(
        180deg,
        rgba(17, 77, 71, 0.3) 0%,
        rgba(22, 53, 50, 0.3) 100%
      );

      z-index: 2;
    }
    .layout-left,.layout-right,.layout-center {
        padding: 24px 16px;
    }
  }
}
</style>
